<template>
	<view class="container">
	<view class="head">
    <u-icon name="arrow-left" color="#fff" size="24" style="margin:20rpx 0 0 20rpx;" @click="leftClick"></u-icon>
  </view>
	<view class="box">
		<view class="register_txt tac">
			<u-tabs :list="list" lineColor="#6750F8" :activeStyle="activeStyle" :current="current" @click="tabClick"></u-tabs>
		</view>
		<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="80"
		ref="uForm" class="uForm" :errorType="errorType" :labelStyle="labelStyle">
      <u-form-item label="身份证号" prop="identity" borderBottom v-if="current==0">
				<u-input v-model="ruleForm.identity" placeholder="请填写身份证号" border="none">
				</u-input>
			</u-form-item>
			<u-form-item :label="current==0? '新手机号码':'手机号码'" prop="mobile" borderBottom>
				<u-input v-model="ruleForm.mobile" placeholder="请输入11位手机号码" border="none">
				</u-input>
			</u-form-item>
			<u-form-item label="验证码" prop="yzm" borderBottom>
				<u-input v-model="ruleForm.yzm" placeholder="请输入验证码" border="none">
				</u-input>
				<view slot="right">
					<u-button type="primary" :plain="true" :text="code" color="#6750F8" size="mini">
					</u-button>
				</view>
			</u-form-item>
			<u-form-item label="新密码" prop="password" borderBottom v-if="current==1">
				<u-input v-model="ruleForm.password" type="password" placeholder="请输入新密码" border="none">
				</u-input>
			</u-form-item>

      <u-form-item label="确认密码" prop="password" borderBottom v-if="current==1">
				<u-input v-model="ruleForm.confirmPassword" type="password" placeholder="请输入确认密码" border="none">
				</u-input>
			</u-form-item>

			<view class="ubtn">
				<u-button type="primary" text="确认修改" @click="submit"></u-button>
			</view>
		</u-form>
	</view>
</view>
</template>

<script>
import UniNavBar from "@/components/uniNavbar/index.vue"
	export default {
    name:'modify',
    components:{
      UniNavBar
    },
		data() {
			return {
        list:[{name:'修改手机号'},{name:'修改密码'}],
        checked:false,
        current:0,
				ruleForm: {
          identity: '',
          mobile: '',
          yzm: '',
          password: '',
          confirmPassword: '',
			  },
        errorType: 'toast',
        activeStyle:{
          color:'#6750F8',
        },
        labelStyle:{
          color:'#6750F8',
        },
        code:'获取验证码',
        rules: {
          identity: [
            {
              type: 'string',
              required: true,
              message: '请填写身份证号',
              trigger: ['blur', 'change']
            },
            {
              // 自定义验证函数，见上说明
              validator: (rule, value, callback) => {
                // 上面有说，返回true表示校验通过，返回false表示不通过
                return uni.$u.test.idCard(value);
              },
              message: '身份证号不正确',
              // 触发器可以同时用blur和change
              trigger: ['change','blur'],
           }],
            mobile: [
              {
                required: true, 
                message: '请输入手机号',
                trigger: ['change','blur'],
              },
              {
                // 自定义验证函数，见上说明
                validator: (rule, value, callback) => {
                  // 上面有说，返回true表示校验通过，返回false表示不通过
                  return uni.$u.test.mobile(value);
                },
                message: '手机号码不正确',
                // 触发器可以同时用blur和change
                trigger: ['change','blur'],
              }
            ],
          yzm: {
            type: 'string',
            required: true,
            message: '请填写验证码',
            trigger: ['blur', 'change']
          },

          password: {
            type: 'string',
            required: true,
            message: '请输入新密码',
            trigger: ['blur', 'change']
          },

          confirmPassword: {
            type: 'string',
            required: true,
            message: '请输入确认密码',
            trigger: ['blur', 'change']
          }
			 },
			}
		},
		onLoad(options) {
      if (options) {
        this.current = options.type
      }
		},
    onReady() {
    	this.$refs.uForm.setRules(this.rules)
    },
		methods: {
      tabClick(e) {
        this.current = e.index
      },
      leftClick(){
        uni.navigateBack({
          delta:1
        })
      },
      submit() {
        this.$refs.uForm.validate().then(res => {
          
        }).catch(errors => {
          console.log(errors)
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
    width:100vw;
    height: 100vh;
    background: #fff url('~@/static/images/register_foot.png') no-repeat left bottom;
    background-size: 750rpx 109rpx;
    .head {
      width:750rpx;
      height: 587rpx;
      background: url('~@/static/images/register_top.png') no-repeat top center;
      background-size: 100% 100%;
    }
    .box {
      width: 640rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 18rpx 0rpx rgba(0,0,0,0.1);
      border-radius: 20rpx;
      margin: -380rpx auto 0;
      padding:45rpx 50rpx 60rpx;
      .register_txt {
        /deep/.u-tabs__wrapper__nav__item {
          flex:1;
          text-align: center;
        }
      }
      .uForm {
        margin-top: 90rpx;
        /deep/.u-form-item {
          padding:10rpx 0;
        }
        /deep/ .u-button--mini {
          height: 56rpx;
        }
        .ubtn {
          margin-top: 80rpx;
        }
      }
    }
	}
</style>
